<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../static/static/css/font.css">
    <link rel="stylesheet" href="../static/static/css/weadmin.css">
    <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="weadmin-body">
  <table id="list" lay-filter="list"></table>
</div>
<script>
    var tableIns;
    var fatherId = null;
    var arrayObj = new Array();
    layui.use('table', function () {
        //执行渲染
        tableIns = layui.table.render({
            elem: '#list'
            ,id: 'list'
            ,page: true
            , cols: [[ //表头
                 {field: 'id', title: 'ID', width:80}
                ,{field: 'name', title: '名称', width:800,event:'updateName'}
                ,{fixed: 'right', align:'center', toolbar: '#bar'}
            ]]
            , toolbar: '#leftBar'
            , url: '/goodsType/getTypeList'
            , method: 'post'
            , contentType: 'application/json'
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.infos //解析数据列表
                };
            }
        });

        layui.table.on('tool(list)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail'){
                arrayObj.push(fatherId);
                fatherId = data.id;
                tableIns.reload({
                    where: {
                        fatherId: data.id,
                    }
                    ,page: {
                        curr: 1
                    }
                });
            } else if(layEvent === 'del'){
                layer.confirm('确认删除?', function(index){
                    var $ = layui.$;
                    layer.close(index);
                    $.ajax({
                        type: "GET",
                        url: "/goodsType/deleteType",
                        data: {
                            id:data.id
                        },
                        dataType: "json",
                        success: function(data){
                            if (data.status != 0){
                                var layer = layui.layer;
                                layer.open({
                                    title: '提示'
                                    ,content: data.msg
                                });
                            }else {
                                obj.del();
                            }
                        }
                    });
                });
            } else if(layEvent === 'edit'){

            }else if (layEvent === 'updateName'){
                layer.prompt({
                    formType: 2
                    ,title: '修改名称为['+ data.name +']'
                    ,value: data.name
                }, function(value, index){
                    layui.$.ajax({
                        type: "POST",
                        url: "/goodsType/updateType",
                        data: JSON.stringify({
                            name: value,
                            id: data.id
                        }),
                        dataType: "json",
                        contentType: 'application/json',
                        success: function(data){
                            if (data.status != 0){
                                layer.open({
                                    title: '提示'
                                    ,content: data.msg
                                });
                            }else {
                                layer.close(index);
                                obj.update({
                                    name: value
                                });
                            }
                        }
                    });
                });
            }
        });
    });

    var backToFather = function () {
        var index = arrayObj.pop();
        fatherId = index;
        tableIns.reload({
            where: {
                fatherId: index
            }
            ,page: {
                curr: 1
            }
        });
    }
    
    var addType = function () {
        layui.use('layer', function(){
            var $ = layui.$;
            var layer = layui.layer;
            var windows = layer.open({
                type: 1
                ,btn: ['确认']
                ,content: '<div class="layui-inline"><input class="layui-input" placeholder="分类名称" name="addName" id="addName"></div>'
                ,yes: function(index, layero){
                    var addName = document.getElementById("addName").value
                    if(addName == null || addName == ''){
                        layer.msg('名称不能为空');
                    }else{
                        $.ajax({
                            type: "POST",
                            url: "/goodsType/addType",
                            data: JSON.stringify({
                                name: document.getElementById("addName").value,
                                fatherId: fatherId
                            }),
                            dataType: "json",
                            contentType: 'application/json',
                            success: function(data){
                                if (data.status != 0){
                                    layer.open({
                                        title: '提示'
                                        ,content: data.msg
                                    });
                                }else {
                                    layer.close(windows);
                                    tableIns.reload({
                                        where: {
                                            fatherId: fatherId
                                        }
                                        ,page: {
                                            curr: 1
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            });
        });
    }
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看子类</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="leftBar">
    <button class="layui-icon layui-icon-return" href="#" onClick="backToFather()"></button>
    <button class="layui-icon layui-icon-add-1" href="#" onClick="addType()"></button>
</script>
</body>
</html>